<template>
  <el-upload
    class="upload-demo"
    :action="uploadFilePath"
    :data="paramData"
    :headers="headers"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    list-type="picture"
    limit="1"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
let { proxy }: any = getCurrentInstance();
let headers = {
  Authorization: 'Bearer ' + localStorage.getItem('token')
};

const uploadFilePath = ref(
  (window as any).apiUrl.VITE_SERVER_URL + '/api/sys/hisEmployee/uploadSignatureFile'
);
let filePath = ref<String>();
const paramData = reactive({
  id: '1717341004530462721'
});
const fileList = reactive([
  {
    name: 'food.jpeg',
    url: ''
  }
]);
function handleRemove(file, fileList) {
  console.log(file, fileList);
}
function handlePreview(file) {
  console.log(file);
}

onMounted(async () => {
  getSignatureFile();
});

// 获取员工关联关系的用户
function getSignatureFile() {
  const url = '/api/sys/hisEmployee/getSignatureFile/' + paramData.id;
  proxy.$http
    .get(url)
    .then((res: any) => {
      fileList[0].url = (window as any).apiUrl.VITE_SERVER_URL + res.data;
    })
    .catch((err: any) => {
      console.log(err);
    });
}
</script>

<style lang="scss" scoped>
#orglist {
  height: 100%;
  .vxe-toolbar {
    .vxe-button {
      padding: 0.1em 0;
    }
  }
  .el-divider--vertical {
    height: 20px;
  }

  .vxe-table {
    .vxe-button {
      height: auto;
      min-width: auto;
      padding: 0.35em;
      margin-left: 0;
      font-size: 13px;
    }
    [class*=' el-icon-'],
    [class^='el-icon-'],
    [class^='icon-'] {
      font-size: 1.3em;
    }
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
